<template>
  <el-row :gutter="24">
  <el-col :span="24">
    <el-card shadow="always">
      <div slot="header" class="clearfix">
        <span>收藏的兼职</span>
      </div>
      <el-table
          :data="tableValue"
          style="width: 100%">
        <el-table-column
            label="兼职名称">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>兼职名称: {{ scope.row.jobDto.title }}</p>
              <p>兼职价格: {{ scope.row.jobDto.price }}</p>
              <p>兼职描述: {{ scope.row.jobDto.content }}</p>
              <p>发布时间: {{ scope.row.jobDto.createTime }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.jobDto.title }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
            label="开始时间">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.jobDto.startTime }}</span>
          </template>
        </el-table-column>
        <el-table-column
            label="结束时间">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.jobDto.endTime }}</span style="margin-left: 10px">
          </template>
        </el-table-column>
        <el-table-column label="分类">
          <template slot-scope="scope">
            <span>{{ scope.row.jobDto.classify.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-tag v-if=" scope.row.jobDto.status==false" type="danger">招满</el-tag>
            <el-tag v-if=" scope.row.jobDto.status==true">未招满</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
                size="mini"
                type="danger"
                @click="deleteCollect(scope.row.jid)">移除收藏</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          :page-size="this.searchParams.pageSize"
          :current-page="this.searchParams.pageNum"
          layout="prev, pager, next"
          :total="this.total"
          @current-change="handleCurrentChange"
      >
      </el-pagination>
    </el-card>
  </el-col>
  </el-row>
</template>

<script>
import {getCollectById, removeCollect} from "@/api/collectApi";
import {getUserById, userUpdate} from "@/api/userApi";
export default {
  name: "LikeJob",
  data(){
    return{
      updUser:{},
      userInfo:{},
      searchParams:{pageNum:1,pageSize:5,token:window.localStorage.getItem("token")},
      tableValue:{},
      total:10
    }
  },
  methods:{
    getCollect(val){
      getCollectById(this.searchParams).then(res=>{
        if (res.code===200){
          this.tableValue=res.data.records;
          this.total=res.data.total;
        }
      })
    },
    getUser(){
      getUserById(window.localStorage.getItem("token")).then(res=>{
        if (res.code===200){
          this.userInfo=res.data;
          this.updUser=res.data;
        }
      })
    },
    deleteCollect(jid) {
      let collect = {jid: jid, token: window.localStorage.getItem("token")};
      removeCollect(collect).then(res => {
        if (res.code === 200) {
          this.getCollect();
        }
      })
    },
    handleCurrentChange(val) {
      this.searchParams.pageNum=val;
      this.getCollect();
    },
    updateUser(){
      userUpdate(this.updUser).then(res=>{
        if (res.code===200){
          this.getUser();
        }
      })
    }
  },
  mounted() {
    this.getCollect();
    this.getUser();
  }
}
</script>

<style scoped>

</style>
